import React, { Component } from 'react'
import { NavBar,Icon } from "antd-mobile";
import SearchBar from "../SearchBar/SearchBar"
import "./Category.css"
import myaxios from "../../utils/myaxios"
import axios from "axios"
class Category extends Component {
    constructor(props) {
        super(props);
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    state = {
        categories: [],  //菜单数据
        categories_content: [],  //右边渲染的内容
        choice: 0,   //选择
    }
    // 左边点击切换右边内容
    LeftClick = (e) => {
        let choice = e.target.getAttribute("data-index")
        console.log(choice)
        this.setState({
            choice: parseInt(choice),
            categories_content: this.state.categories[choice].children
        })
    }
    // 右边点击进入商品列表页
    RightClick = (e) => {
        let cid = e.target.getAttribute("data-index")
        this.props.history.push("/goodList/" + cid)
    }
    //获取分类菜单数据
    getCategories = (params) => {
        // axios请求
        myaxios.get("categories",{
            cancelToken:this.source.token
        }).then((res) => {
            this.setCategories(res)
        }).catch((err) => {
            console.log(err)
        })
    }
    //设置分类菜单数据
    setCategories = (res, is_storaged) => {
        let categories_cache = {};
        if (!is_storaged) {
            categories_cache = { date: Date.now(), categories: res };
            localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        }
        this.setState({
            categories: res,
            categories_content: res[0].children,
        });
    };
    componentDidMount() {
        let categories_cache = localStorage.getItem("categories_cache");
        console.log(categories_cache)
        if (categories_cache && JSON.parse(categories_cache).date) {
            let current_time = Date.now();
            let storage_time = JSON.parse(categories_cache).date;
            if (current_time - storage_time > 60 * 60 * 1000) {
                this.getCategories();
            } else {
                this.setCategories(JSON.parse(categories_cache).categories, true);
            }
        } else {
            this.getCategories();
        }
    }

    render() {
        return (
            <div className="category">
                {/* 分类导航开始 */}
                <div className="category-nav">
                    <NavBar 
                    className="nav"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                    >商品分类</NavBar>
                </div>
                {/* 分类导航结束 */}
                {/* 分类搜索框开始 */}
                <div className="category-searchbar">
                    <SearchBar></SearchBar>
                </div>
                {/* 分类搜索框结束 */}
                {/* 分类菜单开始 */}
                <div className="category-content">
                    {/* 分类菜单左边开始 */}
                    <div className="content-left" onClick={this.LeftClick}>
                        {this.state.categories.map((v, index) => {
                            return (
                                <div data-index={index}
                                    className={this.state.choice === index
                                        ? "active left-item"
                                        : "left-item"}
                                    key={v.cat_id}>{v.cat_name}
                                </div>
                            )
                        })}
                    </div>
                    {/* 分类菜单左边结束 */}
                    {/* 分类菜单右边开始 */}
                    <div className="content-right">
                        {this.state.categories_content.map((v, i) => {
                            return (
                                <div className="right-item"
                                    key={v.cat_id}>
                                    {/* 二级标题开始 */}
                                    <div className="item-title">
                                        {"/"}
                                        {v.cat_name}
                                        {"/"}
                                    </div>
                                    {/* 二级标题结束 */}
                                    {/* 产品列表开始 */}
                                    <div className="product-list" onClick={this.RightClick}>
                                        {v.children && v.children.map(v => {
                                            return <div key={v.cat_id}
                                                className="list-item" data-index={v.cat_id}>
                                                <div className="itme-img">
                                                    <img src={v.cat_icon} alt="" data-index={v.cat_id} />
                                                </div>
                                                <div className="item-title">{v.cat_name}</div>
                                            </div>
                                        })}
                                    </div>
                                    {/* 产品列表结束 */}
                                </div>
                            )
                        })}
                    </div>
                    {/* 分类菜单右边结束 */}
                </div>
                {/* 分类菜单结束 */}
            </div>
        )
    }
}
export default Category